<template>
    <view class="container">
        <view class="user-profile">
            <view class="avatar-wrapper">
                <image class="avatar" :src="avatarSrc" mode="aspectFill"></image>
            </view>
            <view class="user-details">
                <text class="username">{{ username }}</text>
                <text class="user-id">{{ userPhone }}</text>
            </view>
        </view>
        <view class="function-section">
            <view class="function-list">
                <view class="function-item" @click="navigateToAddress">
                    <image class="icon" src="/static/icon/adress.png" />
                    <text class="function-name">我的地址</text>
                    <image class="arrow-icon" src="/static/icon/箭头.png" />
                </view>
                <view class="function-item" @click="navigateToFollow">
                    <image class="icon" src="/static/icon/我的关注.png" />
                    <text class="function-name">我的关注</text>
                    <image class="arrow-icon" src="/static/icon/箭头.png" />
                </view>
                <view class="function-item" @click="navigateToOrder">
                    <image class="icon" src="/static/icon/我的订单.png" />
                    <text class="function-name">我的订单</text>
                    <image class="arrow-icon" src="/static/icon/箭头.png" />
                </view>
            </view>
            <button class="logout-button" @click="logout">退出登录</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            avatarSrc: '/static/imgs/assets/header.png',
            username: '小蓝',
            userPhone: 'ID:123456',
            phone: '',
            userInfo: {}
        };
    },
    onLoad() {
        this.phone = uni.getStorageSync('currentPhone');
        if (this.phone) {
            this.fetchUserInfoByPhone(this.phone);
        }
    },
    methods: {
        fetchUserInfoByPhone(phone) {
            uni.request({
                url: `http://localhost:3000/users?phone=${phone}`,
                success: (res) => {
                    if (res.statusCode === 200 && res.data.length > 0) {
                        this.userInfo = res.data[0];
                        this.username = this.userInfo.username;
                        this.userPhone = this.userInfo.phone;
                    }
                }
            });
        },
        navigateToAddress() {
            uni.navigateTo({
                url: '/pages/me/address'
            });
        },
        navigateToFollow() {
            uni.navigateTo({
                url: '/pages/index/more'
            });
        },
        navigateToOrder() {
            uni.switchTab({
                url: '/pages/order/order'
            });
        },
        logout() {
            uni.showModal({
                title: '提示',
                content: '确定要退出登录吗？',
                success: (res) => {
                    if (res.confirm) {
                        uni.removeStorageSync('userInfo');
                        uni.removeStorageSync('currentPhone');
                        uni.redirectTo({
                            url: '/pages/login/login'
                        });
                    }
                }
            });
        }
    }
};
</script>

<style scoped>
.container {
    background-color: #f9f9f9;
    min-height: 100vh;
    padding: 20px;
}

.user-profile {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 30px;
    text-align: center;
    margin-bottom: 25px;
}

.avatar-wrapper {
    margin-bottom: 20px;
}

.avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.user-details {
    margin-top: 10px;
}

.username {
    font-size: 26px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 5px;
}

.user-id {
    font-size: 16px;
    color: #777777;
}

.function-section {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 20px;
}

.function-list {
    margin-bottom: 20px;
}

.function-item {
    display: flex;
    align-items: center;
    padding: 18px 15px;
    border-bottom: 1px solid #eeeeee;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.function-item:last-child {
    border-bottom: none;
}

.function-item:hover {
    background-color: #f5f5f5;
}

.icon {
    width: 28px;
    height: 28px;
    margin-right: 15px;
}

.function-name {
    flex: 1;
    font-size: 18px;
    color: #333333;
}

.arrow-icon {
    width: 20px;
    height: 20px;
    color: #999999;
}

.logout-button {
    background-color: #52a3ff;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 15px;
    font-size: 18px;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.3s ease;
}

</style>    